<template>
  <div class="trackTable">
    <div class="searchbox" style="">
      <div>
        <span style="margin-right: 20px">
          总条数：{{ loactionList.length }}
        </span>
        <el-date-picker
          v-model="dateTime"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          size="mini"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>

        <el-button
          type="primary"
          @click="submitForm(ruleForm)"
          size="mini"
          class="searchBtn"
          >搜索</el-button
        >
        <el-button @click="exportTable" size="mini">导出</el-button>
      </div>
    </div>
    <div style="margin-top: 5px">
      <el-table
        ref="table"
        :data="loactionList"
        :header-cell-style="{
          background: '#f2f2f2',
          color: '#333',
          fontSize: '12px',
        }"
        size="mini"
        height="240px"
        style=""
      >
        <el-table-column label="序号" type="index" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="gpsTime"
          label="时间"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.gpsTime) }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="speed" label="速度" align="center" width="80">
        </el-table-column>
        <el-table-column
          prop="direction"
          label="方向"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column prop="mileage" label="里程" align="center" width="100">
        </el-table-column>
        <el-table-column
          prop="gdLng"
          label="经度"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="gdLat"
          label="纬度"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="curAddress"
          label="位置"
          align="center"
          width="500"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
// import ExportJsonExcel from "js-export-excel";
export default {
  props: {
    height: {},
    isStart: {},
    dataIndex: {},
    chooseDateVal: "",
  },
  computed: {},
  data() {
    return {
      dateTime: [],
      ruleForm: {
        startDate: "",
        endDate: "",
      },
      page: {
        pageSize: 10,
        pageNumber: 1,
        getList: this.getrecord,
      },
      flay: true,
      // 底部列表
      activeName: "first",

      loactionList: [],
      loactiondata: [],
      timer: null,
      tableHeight: 0,
    };
  },
  watch: {
    locationCar(val) {
      if (val.length > 0) {
        this.loactionList = val;
        this.loading = false;
      } else {
        this.loactionList = [];
      }
    },
    chooseDateVal(val) {
      // console.log(11, val);
      this.getTime(val);
    },
  },
  mounted() {
    this.getCurrentTime();
  },
  methods: {
    getCurrentTime() {
      //获取当前时间
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      let gettime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
      let starttime = yy + "-" + mm + "-" + dd + " 00:00:00";
      this.dateTime.push(starttime, gettime);
    },
    getTime(val) {
      console.log("子组件接受时间", this.chooseDateVal);
      this.dateTime = [];
      let start = val + " 00:00:00";
      let end = val + " 23:59:59";
      this.dateTime = [start, end];
    },
    getData(val) {
      console.log("子组件接受值", val);
      this.deviceNumber = val.deviceNumber;
      if (!val.table) {
        this.loactionList = [];
        return;
      }
      this.loactionList = val.table;
    },

    handleCurrentChange(val) {
      this.page.pageNumber = val;
      this.getrecord(this.page);
    },
    getrecord(e) {
      let arr = [];
      for (
        let i = e.pageSize * (e.pageNumber - 1);
        i < e.pageSize * e.pageNumber;
        i++
      ) {
        if (this.loactionList[i]) {
          arr.push(this.loactionList[i]);
        }
      }
      this.$set(this, "loactiondata", arr);
      this.flay = false;
      this.$nextTick(() => {
        this.flay = true;
      });
    },

    submitForm(ruleForm) {
      ruleForm.startDate = null;
      ruleForm.endDate = null;
      if (this.dateTime) {
        ruleForm.startDate = this.dateTime[0];
        ruleForm.endDate = this.dateTime[1];
      }
      console.log(this.ruleForm);
      this.$emit("timeSearchInfo", this.ruleForm);
    },

    //前端导出
    afterExportTable() {
      var option = {};
      option.fileName = "车辆轨迹";
      //  console.log(sheetFilter)
      option.datas = [
        {
          sheetData: this.loactionList,
          sheetName: "车辆轨迹",
          // sheetFilter:sheetFilter,
          sheetFilter: [
            //列过滤
            "GpsDateTime",
            "WorkState",
            "Speed",
            "Direction",
            "Mileage",
            "oil",
            "gdLng",
            "gdLat",
            "CurAddress",
          ],
          // sheetHeader:sheetHeader
          sheetHeader: [
            //第一行
            "时间",
            "车辆状态",
            "速度（km/h）",
            "方向",
            "里程",
            "油量",
            "经度",
            "纬度",
            "位置",
          ],
        },
      ];
      var toExcel = new ExportJsonExcel(option);
      toExcel.saveExcel();
    },
    // 导出
    exportTable() {
      let params = {
        deviceNumber: this.deviceNumber,
        startTime: this.dateTime[0],
        endTime: this.dateTime[1],
      };
      this.download(
        "/location/track/trackData/export",
        {
          ...params,
        },
        `车辆历史轨迹_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.searchbox {
  font-size: 14px;
  margin: 5px 16px 10px 16px;
  .searchBtn {
    margin: 0 6px;
  }
}
</style>
